<template>
  <div class="gi_table_page">
    <GiTable title="设备清单" row-key="id" :data="dataList" :columns="columns" :loading="loading"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }" :pagination="pagination" :disabled-tools="['size']"
      :disabled-column-keys="['name']" @refresh="search">

      <template #toolbar-left>
        <a-input :style="{width:'320px'}" v-model="queryForm.fuzzy" placeholder="搜索设备编号/类型/品牌/型号" allow-clear @change="search">
          <template #prefix><icon-search /></template>
        </a-input>

        <a-select :style="{width:'100px'}" v-model="queryForm.status" placeholder="状态" allow-clear @change="search" >
          <a-option value="1">闲置</a-option>
          <a-option value="2">使用中</a-option>
          <a-option value="3">借用</a-option>
          <a-option value="4">维修中</a-option>
          <a-option value="5">已报废</a-option>
          <a-option value="0">回收站</a-option>
        </a-select>

        <a-button @click="reset">
          <template #icon><icon-refresh /></template>
          <template #default>重置</template>
        </a-button>

       

      </template>
      <template #toolbar-right>
        <a-button v-permission="['asset:deviceRecords:add']" type="primary" @click="onAdd">
          <template #icon><icon-plus /></template>
          <template #default>新增</template>
        </a-button>
        <a-button v-permission="['asset:deviceRecords:add']" type="dashed" @click="onAdd">
          <template #icon><icon-tag /></template>
          <template #default>打印标签</template>
        </a-button>
        <a-button v-permission="['asset:deviceRecords:add']" type="dashed" @click="onAdd">
          <template #icon><icon-book /></template>
          <template #default>打印清单</template>
        </a-button>
        <a-button v-permission="['asset:deviceRecords:add']" type="primary" status="success" @click="onAdd">
          <template #icon><icon-import /></template>
          <template #default>导入设备</template>
        </a-button>
        <a-button v-permission="['asset:device:records:export']" @click="onExport">
          <template #icon><icon-download /></template>
          <template #default>导出</template>
        </a-button>
      </template>

      <template #status="{ record }">
        <a-tag v-if="record.status === 1" color="green" size="small">闲置</a-tag>
        <a-tag v-if="record.status === 2" color="arcoblue" size="small">使用中</a-tag>
        <a-tag v-if="record.status === 3" color="blue" size="small">借用</a-tag>
        <a-tag v-if="record.status === 4" color="orange" size="small">维修中</a-tag>
        <a-tag v-if="record.status === 5" color="red" size="small">已报废</a-tag>
      </template>

      <template #action="{ record }">
        <a-space>
          <a-link v-permission="['asset:deviceRecords:detail']" title="详情" @click="onDetail(record)">详情</a-link>
          <a-link v-permission="['asset:deviceRecords:update']" title="修改" @click="onUpdate(record)">修改</a-link>
          <a-link v-permission="['asset:deviceRecords:delete']" status="danger" :disabled="record.disabled"
            :title="record.disabled ? '不可删除' : '删除'" @click="onDelete(record)">
            删除
          </a-link>
        </a-space>
      </template>
    </GiTable>
  </div>
</template>

<script setup lang="ts">

  import { type DeviceRecordsResp, type DeviceRecordsQuery, deleteDeviceRecords, exportDeviceRecords, listDeviceReycle } from '@/apis/asset/device/records'
  import type { TableInstanceColumns } from '@/components/GiTable/type'
  import type { ColumnItem } from '@/components/GiForm'


  import { useDownload, useTable } from '@/hooks'
  import { useDict } from '@/hooks/app'
  import { isMobile } from '@/utils'
  import has from '@/utils/has'

  defineOptions({ name: 'DeviceRecycle' })


  const queryForm = reactive < DeviceRecordsQuery > ({
    fuzzy: undefined,
    status: undefined,
    sort: ['id,desc']
  })

  const {
    tableData: dataList,
    loading,
    pagination,
    search,
    handleDelete
  } = useTable((page) => listDeviceReycle({ ...queryForm, ...page }), { immediate: true })
  const columns = ref < TableInstanceColumns[] > ([
    { title: '设备编号', dataIndex: 'code', slotName: 'code' },
    { title: '二维码', dataIndex: 'qrCodeUrl', slotName: 'qrCodeUrl', show: false },
    { title: '分类', dataIndex: 'categoryName', slotName: 'categoryName' },
    { title: '名称', dataIndex: 'name', slotName: 'name', show: false },
    { title: '品牌', dataIndex: 'brand', slotName: 'brand' },
    { title: '型号', dataIndex: 'model', slotName: 'model' },
    { title: '所属机构', dataIndex: 'deptName', slotName: 'deptName', show: false },
    { title: '使用人', dataIndex: 'userNickname', slotName: 'userNickname', show: false },
    { title: '状态', dataIndex: 'status', slotName: 'status' },
    { title: '登记日期', dataIndex: 'purchaseDate', slotName: 'purchaseDate' },
    { title: '到期日期', dataIndex: 'expireDate', slotName: 'expireDate' },
    { title: '折旧规则ID', dataIndex: 'depreciationRuleId', slotName: 'depreciationRuleId', show: false },
    { title: '序列号', dataIndex: 'sn', slotName: 'sn', show: false },
    { title: '供应商', dataIndex: 'producerName', slotName: 'producerName' },
    { title: '采购价格', dataIndex: 'price', slotName: 'price', show: false },
    { title: '描述', dataIndex: 'description', slotName: 'description', show: false },

    {
      title: '操作',
      dataIndex: 'action',
      slotName: 'action',
      width: 160,
      align: 'center',
      fixed: !isMobile() ? 'right' : undefined,
      show: has.hasPermOr(['asset:deviceRecords:detail', 'asset:deviceRecords:update', 'asset:deviceRecords:delete'])
    }
  ]);


  // 重置
  const reset = () => {
    queryForm.fuzzy = undefined
    queryForm.name = undefined
    queryForm.code = undefined
    queryForm.categoryId = undefined
    queryForm.brand = undefined
    queryForm.model = undefined
    queryForm.deptId = undefined
    queryForm.userId = undefined
    queryForm.status = undefined
    queryForm.isDel = undefined
    queryForm.sn = undefined
    search()
  }

  // 删除
  const onDelete = (record: DeviceRecordsResp) => {
    return handleDelete(() => deleteDeviceRecords(record.id), {
      content: `是否确定删除该条数据？`,
      showModal: true
    })
  }

  // 导出
  const onExport = () => {
    useDownload(() => exportDeviceRecords(queryForm))
  }

  const DeviceRecordsAddDrawerRef = ref < InstanceType < typeof DeviceRecordsAddDrawer >> ()
  // 新增
  const onAdd = () => {
    DeviceRecordsAddDrawerRef.value?.onAdd()
  }

  // 修改
  const onUpdate = (record: DeviceRecordsResp) => {
    DeviceRecordsAddDrawerRef.value?.onUpdate(record.id)
  }

  const DeviceRecordsDetailDrawerRef = ref < InstanceType < typeof DeviceRecordsDetailDrawer >> ()
  // 详情
  const onDetail = (record: DeviceRecordsResp) => {
    DeviceRecordsDetailDrawerRef.value?.onOpen(record.id)
  }
</script>

<style scoped lang="scss"></style>